<template>
    <div class="w-100" v-if="isready">
        <topHeader title="三菱镭射自动化 — 工单看板"></topHeader>
        <div class="update_time">更新时间: {{ updateTimeNow }}</div>
        <div class="work_status--wrap m-2">
            <div class="shade_box"></div>
            <table style="border-collapse:separate;width:100%;" class="table-wrap table1">
                <tr class="work_status--header">
                    <th>机器</th>
                    <th>工单</th>
                    <th>生产数板量</th>
                    <th>生产面</th>
                    <th>生产面数量(A+B)</th>
                    <th>不良品数</th>
                    <th>实际完成进度</th>
                    <th>状态</th>
                    <th class="w-10">停机原因</th>
                </tr>
                <tbody class="w-100 work_status--content" :style="isScorll ? 'animation-duration: ' + duration + 's' : ''">
                    <tr v-for="(item, index) in newmachineList" :key="index">
                        <td>
                            <img class="machine-img" :src="`${item.img}`" />
                            <p style="margin:0" class="mr-0">{{ item.model }}</p>
                        </td>
                        <td class="text">{{ item.OrderInfo && item.OrderInfo.Order || '--' }}</td>
                        <td>{{ item.OrderInfo && item.OrderInfo.Qty || '--' }}</td>
                        <td>{{ item.side || '--' }}</td>
                        <td>{{ item.produced }}/{{ item.quantity }}</td>
                        <td>0</td>
                        <td>
                            <div class="d-flex flex-column">
                                <div>
                                    <span style="vertical-align: text-bottom;margin-right:1vh;">实际进度</span>
                                    <tempo :width="item.tempo || 0"></tempo>
                                    <span style="vertical-align: text-bottom;margin-left:1vh;">{{ item.tempo > 0
                                        ? item.tempo : 0 }}%</span>
                                </div>
                            </div>
                        </td>
                        <td>
                            <span class="mr-0" :style="{ color: item.status == 'Paused' ? '#d9534f' : '' }">{{
                                machineStatusDesc(item.status, item.dur) }}</span>
                        </td>
                        <td class="w-10">{{ item.reason || '--' }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <bottomFooter></bottomFooter>
    </div>
</template>
<script setup lang="ts">
import topHeader from '@/components/topHeader/index.vue';
import tempo from '@/components/tempo/index.vue'
import bottomFooter from '@/components/bottomFooter/index.vue';
import $ from 'jquery';
import img1 from '@/assets/img/laserdrill.png';
import img2 from '@/assets/img/ledia6-002.png'
import img3 from '@/assets/img/INSPECTA_COMBO.png'
const newmachineList = ref([]) as EmptyObjectType
const isready = ref(false)
const duration = ref(0)
const isScorll = ref(false)
const timer: any = ref('')
const updateTimeNow = ref('')
const oldmachinelist = ref([]) as EmptyObjectType
const { proxy } = getCurrentInstance() as any
onMounted(() => {
    isready.value = true
    realTimeFresh()
})


const realTimeFresh = () => {
    clearTimeout(timer.value)
    getData()
    timer.value = setTimeout(function () {
        realTimeFresh()
    }, 300000)
}


const machineStatusDesc = (status: any, dur: number) => {
    let machineStatus = ''
    switch (status) {
        case "Idle":
            machineStatus = "无计划/闲置";
            break;
        case "Off":
            machineStatus = "维护中";
            break;
        case "Running":
            machineStatus = "运行";
            break;
        case "Stopped":
            if (dur > 180) {
                machineStatus = "无计划/停产";
            } else {
                machineStatus = "暂停"
            }
            break;
        case "Unplanned":
            machineStatus = "无计划/停产";
            break;
        case "Paused":
            machineStatus = "暂停";
            break;
    }

    return machineStatus;
}

//初始化数据
const setMachineData = async (ProdplateNum: any, machineList: any) => {
    for (let i = 0; i < machineList.length; i++) {
        if (ProdplateNum && ProdplateNum.length > 0 && ProdplateNum[i]) {
            machineList[i].ProduplateNum = ProdplateNum[i].qty
        }
        // if (machineList[i].quantity) {
        //     machineList[i].ProduplateNum = machineList[i].quantity > 0 ? parseInt(machineList[i].quantity / 2) : 0
        // }
        machineList[i]['tempo'] = 0
        if (machineList[i].produced != 0 && machineList[i].quantity != 0) {

            if (machineList[i].quantity <= 0) {
                machineList[i].side = "--";
            } else if (machineList[i].produced <= 0) {
                machineList[i].side = "A";
            } else if (machineList[i].var1 != "") {
                if (machineList[i].var1 == "0") {
                    machineList[i].side = "A";
                } else if (machineList[i].var1 == "1") {
                    machineList[i].side = "B";
                }
            } else {
                if (machineList[i].produced * 2 > machineList[i].quantity) {
                    machineList[i].side = "B";
                } else {
                    machineList[i].side = "A";
                }
            }

            let tempo: any = machineList[i].produced / machineList[i].quantity
            let progress_num = tempo.toFixed(2) * 100
            machineList[i]['tempo'] = progress_num.toFixed(0)
            if (i == machineList.length - 1) {
                newmachineList.value = machineList
            }
        }

    }
    newmachineList.value = machineList

    console.log(newmachineList.value)
    $(document).ready(function () {
        var contentHeight = $('.work_status--content').height()
        var totalHeight = $('.work_status--wrap').height()
        isScorll.value = (totalHeight - contentHeight) <= 65
        //设置自动滚动
        proxy.$common.hoverAction('.work_status--content', '.work_status--content')
        proxy.$common.hoverAction('.work_status--contents', '.work_status--content')
    })
    nextTick(() => {
        duration.value = newmachineList.value.length * 7
    })

}
const getData = async () => {
    const machineList = [
        { img: img1, "lot": "", "status": "Unplanned", "machstatus": "Stopped", "reason": "", "dur": 62713, "station": "Production", "location": "", "machine": "GTW6-01", "machineorder": 1, "oem": "三菱", "model": "三菱镭射钻孔机", "job": "", "customer": "", "leadlist": null, "oplist": null, "lead": "", "op": "", "product": "", "quantity": 60, "produced": 60, "wasted": 0, "wastedQC": 0, "wastedMach": 0, "expstart": "", "t_start": "0001-01-01T00:00:00Z", "start": "", "expend": "", "fixedexpend": "", "t_end": "0001-01-01T00:00:00Z", "end": "", "pending_end": "", "last": "", "var1": "", "var2": "", "var3": "", "var4": "", "var5": "", "var6": "", "var7": "", "equip": { "process": "", "mold": { "id": "", "name": "" }, "peripheral": null }, "isSide": false, "isFinal": false, "overridenby": "", "override": null, "salesorder": "", "batchid": "", "productmodel": "", "productname": "", "tag": "", "tagorder": "", "notconnected": false, "remark": "" },
        { img: img2, "lot": "", "status": "Unplanned", "machstatus": "Stopped", "reason": "", "dur": 62713, "station": "Production", "location": "", "machine": "DI曝光机", "machineorder": 2, "oem": "网屏", "model": "双台面DI曝光机", "job": "", "customer": "", "leadlist": null, "oplist": null, "lead": "", "op": "", "product": "", "quantity": 60, "produced": 1, "wasted": 0, "wastedQC": 0, "wastedMach": 0, "expstart": "", "t_start": "0001-01-01T00:00:00Z", "start": "", "expend": "", "fixedexpend": "", "t_end": "0001-01-01T00:00:00Z", "end": "", "pending_end": "", "last": "", "var1": "", "var2": "", "var3": "", "var4": "", "var5": "", "var6": "", "var7": "", "equip": { "process": "", "mold": { "id": "", "name": "" }, "peripheral": null }, "isSide": false, "isFinal": false, "overridenby": "", "override": null, "salesorder": "", "batchid": "", "productmodel": "", "productname": "", "tag": "", "tagorder": "", "notconnected": false, "remark": "" },
        { img: img3, "lot": "", "status": "Unplanned", "machstatus": "Stopped", "reason": "", "dur": 62713, "station": "Production", "location": "", "machine": "x光钻靶机", "machineorder": 3, "oem": "Pluritec", "model": "x光钻靶机", "job": "", "customer": "", "leadlist": null, "oplist": null, "lead": "", "op": "", "product": "", "quantity": 60, "produced": 5, "wasted": 0, "wastedQC": 0, "wastedMach": 0, "expstart": "", "t_start": "0001-01-01T00:00:00Z", "start": "", "expend": "", "fixedexpend": "", "t_end": "0001-01-01T00:00:00Z", "end": "", "pending_end": "", "last": "", "var1": "", "var2": "", "var3": "", "var4": "", "var5": "", "var6": "", "var7": "", "equip": { "process": "", "mold": { "id": "", "name": "" }, "peripheral": null }, "isSide": false, "isFinal": false, "overridenby": "", "override": null, "salesorder": "", "batchid": "", "productmodel": "", "productname": "", "tag": "", "tagorder": "", "notconnected": false, "remark": "" }]
    oldmachinelist.value = machineList
    setMachineData(null, machineList)
}
</script>

<style lang="less">
.work_status--wrap {
    position: relative;
    color: white;
    height: 88%;
    overflow: hidden;
}

.work_status--header {
    position: relative;
    z-index: 111;
    font-size: 1rem;
}

.update_time {
    font-size: 1rem;
}

.table-header {
    position: fixed;
    width: 100%;
    top: 10%;
}

.work_status--content {
    font-size: .9rem;
}

.work_status--content td {
    text-align: center;
}

.machine-img {
    height: 4rem;
}

.mr-0 {
    margin: 0 !important;
}

.shade_box {
    z-index: 111;
    position: absolute;
    left: 0;
    top: 0px;
    right: 0;
    background: #0a2a2c;
    height: 4rem;
    margin: 0 1rem;
}

.update_time {
    position: fixed;
    top: 5%;
    right: 2%;
    color: #fff;
    height: 4vh;
    line-height: 4vh;
}

.work_status--content {
    background-color: #233b3e;
    text-align: center;
    color: white;
    position: relative;
    width: 100%;
    top: 0%;
    z-index: 10;
    overflow: hidden;

    animation-name: scrollTop;
    animation-duration: 0s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-delay: 1s;
}

@keyframes scrollTop {
    0% {
        transform: translateY(0%);
    }

    100% {
        transform: translateY(-70%);
    }
}

.work_status--header th {
    padding: 0rem 0;
}

.work_status--content td {
    padding: .5rem 0;
}

.table-wrap {
    border-spacing: 0 1.2rem;
    padding: 0 1rem;
}
</style>